<template>
	<view class="content">
		<view class="card">
			<view class="flex">
				<view class="title">文字正常情况</view>
			</view>
			<view class="flex">
				<view style="200upx"><text class="text-title">标题:</text></view>
				<view class="flex-1"><text class="text-content">文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位</text></view>
			</view>
		</view>
		<view class="card">
			<view class="flex">
				<view class="title">文字显示一行</view>
			</view>
			<view class="flex">
				<view style="200upx"><text class="text-title">标题:</text></view>
				<view class="flex-1 max-line-1"><text class="text-content">文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位</text></view>
			</view>
		</view>
		<view class="card">
			<view class="flex">
				<view class="title">文字显示两行(可修改几行就几行后隐藏)</view>
			</view>
			<view class="flex">
				<view style="200upx"><text class="text-title">标题:</text></view>
				<view class="flex-1 max-line-2"><text class="text-content">文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位文字占位</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.card{
		border: 1upx solid #999999;
		margin-bottom: 20upx;
		padding: 20upx;
	}
	.content {
		margin: 0upx 30upx;
		border: 1upx solid #F8F8F8;
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
	}
	.flex-1{
		flex: 1;
	}
	.title{
		height: 70upx;
		line-height: 70upx;
		text-align: left;
		font-size: 32upx;
		font-weight: bold;
	}
	.text-title{
		font-size: 32upx;
		color: #333333;
	}
	.text-content{
		font-size: 32upx;
		color: #999999;
	}
	/* 文字显示一行 */
	.max-line-1 {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.max-line-2 {
		white-space: normal;
		word-break: break-all;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		/* 需要几行修改数字 */
		-webkit-line-clamp: 2;
	}
</style>
